<!-- 收缩悬浮窗 -->
<template>
    <div class="new-suspension">
        <div
            v-show="element.eles.customFeature.showSuspensionStatus === 1"
            :style="{
                width: element.eles.customFeature.navigationWidth,
                height: element.eles.customFeature.navigationHeight
            }"
            class="show-type"
            @click="element.eles.customFeature.showSuspensionStatus = 2"
        >
            <el-image
                :src="element.eles.customFeature.spreadIcon"
                fit="fill"
                :style="{
                    opacity: element.eles.customFeature.spreadOpacity,
                    borderRadius: element.eles.customFeature.navigationRadius
                }"
                class="spread-pic"
            >
                <template #error>
                    <div class="picture-image-slot no-image"></div>
                </template>
            </el-image>
        </div>

        <div v-show="element.eles.customFeature.showSuspensionStatus === 2">
            <div class="suspension-view display-flex">
                <div
                    :style="{
                        backgroundColor: element.eles.customFeature.lineBackgroundColor,
                        backgroundImage: element.eles.customFeature.lineBackgroundImage,
                        borderRadius: element.eles.customFeature['border-radius'],
                        opacity: element.eles.style.opacity
                    }"
                    :class="{
                        'one-column': element.eles.customFeature.everyLineNum === 1
                    }"
                    class="suspension-content"
                >
                    <template v-for="(item, index) in content" :key="index">
                        <div class="suspension-line display-flex">
                            <template v-for="(item2, index2) in item" :key="index2">
                                <div
                                    :style="{
                                        marginRight: element.eles.customFeature['margin-right'],
                                        marginBottom: element.eles.customFeature['margin-bottom']
                                    }"
                                    :class="{
                                        'display-flex': element.eles.customFeature.structure === '2'
                                    }"
                                    class="suspension-content-body"
                                >
                                    <template v-if="element.eles.customFeature.openIcon">
                                        <el-image
                                            :src="item2.pic"
                                            fit="fill"
                                            :style="{
                                                width: element.eles.customFeature['icon-size'],
                                                height: element.eles.customFeature['icon-size'],
                                                borderRadius: element.eles.customFeature['icon-radius'],
                                                opacity: element.eles.customFeature['icon-opacity']
                                            }"
                                            class="suspension-image"
                                        >
                                            <template #error>
                                                <div class="picture-image-slot no-image"></div>
                                            </template>
                                        </el-image>
                                    </template>
                                    <template v-if="element.eles.customFeature.openText">
                                        <div
                                            :style="{
                                                fontSize: element.eles.style['font-size'],
                                                color: element.eles.style.color
                                            }"
                                            :class="{
                                                'suspension-title-two': element.eles.customFeature.structure === '2'
                                            }"
                                            class="suspension-title"
                                        >
                                            {{ item2.title }}
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>

                    <div
                        :class="{
                            'pickUpType-1': element.eles.customFeature.everyLineNum > 1
                        }"
                        class="pick-up-icon pick-up-icon-3"
                        @click="element.eles.customFeature.showSuspensionStatus = 1"
                    >
                        <el-image
                            :src="element.eles.customFeature.pickUpIcon"
                            fit="fill"
                            class="pick-up-image"
                        >
                            <template #error>
                                <div class="picture-image-slot no-image"></div>
                            </template>
                        </el-image>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
export default defineComponent({
    name: 'WidgetNewSuspension',
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props, { emit }) {
        const { element } = toRefs(props)

        const content = computed(() => {
            const list = []
            const everyLineNum = element.value.eles.customFeature.everyLineNum
            for (let index = 0, len = element.value.eles.content.length; index < len; index += everyLineNum) {
                list.push(element.value.eles.content.slice(index, index + everyLineNum))
            }
            return list
        })
        
        return {
            element,
            content
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-new-suspension.less';
</style>